<template>
  <view class="wallet-bill">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="退款申请记录"></van-nav-bar>
    <!-- #endif -->
    <QcscrollUni ref="mescrollRef" :getData="getData" :height="heightScroll">
      <view class="refund-tips">
        <view class="iconfont icon-refund-tip"></view>
        提示：退款失败金额不会从个人钱包中扣除，可重新申请退款！
      </view>
      <view class="list-wrap" v-for="(item, index) in data.list" :key="index">
        <view class="list-left">
          <view class="money">
            状态：
            <text class="main-color">{{ item.status }}</text>
          </view>
          <view class="time">{{ item.createTime }}</view>
        </view>
        <view class="list-right">
          <view class="money">
            申请金额：
            <text class="main-color">￥{{ item.requestAmount }}</text>
          </view>
          <view class="time">已到账：￥{{ item.receivedAmount }}</view>
        </view>
      </view>
    </QcscrollUni>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import { pagingRefundRequest } from '@/service/apis/mine';
import { getItem } from '@/utils/util';
import { setToastInstance, systemInfo } from '@/mixins/info';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

let heightScroll = ref(`100%`);
// #ifdef H5
heightScroll.value = `${systemInfo.screenHeight - systemInfo.navHeight - systemInfo.safeBottom}px`;
// #endif
let data = reactive({
  list: [] as Array<any>,
});

const getData = (extraParams: { pageNum: number; pageSize: number }) => {
  return new Promise(resolve => {
    pagingRefundRequest(getItem('walletId'), extraParams)
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          data.list = res.dataList;
        } else {
          data.list = [...data.list, ...res.dataList];
        }
        resolve({ list: data.list, total: res.totalCount });
      })
      .catch(() => {
        resolve({ list: [], total: 0 });
      });
  });
};

onLoad(() => {
  getData({ pageNum: 1, pageSize: 10 });
});

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>
<style lang="scss">
page {
  background-color: #f2f2f2;
}
</style>

<style lang="scss" scoped>
.wallet-bill {
  .refund-tips {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: $uni-color-primary;
    padding: 12px;
    display: flex;
    .icon-refund-tip {
      line-height: 16px;
      color: $uni-color-primary;
      padding-right: 6px;
    }
  }

  .list-wrap {
    border-radius: 8px;
    background-color: #fff;
    padding: 16px;
    margin: 6px 12px;
    display: flex;
    justify-content: space-between;
    .list-left {
      // align-items: center;
      font-size: 14px;
      color: #545454;
      .totle-money {
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        color: $uni-color-primary;
      }
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      color: #545454;
      .money {
        margin-bottom: 12px;
      }
      .main-color {
        color: $uni-color-primary;
      }
    }
    .list-right {
      font-size: 14px;
      margin-top: 4px;
      text-align: right;
      color: #000000;
      .money {
        display: flex;
        margin-bottom: 12px;
        .main-color {
          color: $uni-color-primary;
        }
      }
      .time {
        color: #000000;
      }
    }
  }
}
</style>
